<script setup lang="ts">
import IconPack from "@/components/utils/icon-pack.vue";
import Preferences from "@/views/Student/component/Header/preferences.vue";
import {UserOutlined} from "@ant-design/icons-vue";
import {inject, ref, type Ref} from "vue";
import {useRouter} from "vue-router";
import {useMenu} from '@/views/Student/set'
import {setMenu, getMenu, delMenu} from "@/config";
import { getToken, delToken, getUser } from "@/config";
import * as jwt from 'jwt-decode'

const router = useRouter()
const go:any = inject('go')
const selectedKeys:Ref = ref<string[]>([`${ getMenu() ? getMenu() : 'learn'}`]);
const menus:any = useMenu()
// 根据token解析用户信息
const userInfo:IUser|null = getUser()
if (!userInfo){
  router.push('/')
}
const handelGo = ():void => {
  selectedKeys.value[0] = 'person'
  setMenu('person')
  go('/personal')
};
const handelChangeMenuClick = (item:string):void => {
  setMenu(item)
  delMenu(2)
}
//退出登录
const logOut = () => {
  delToken()
  sessionStorage.clear()
  localStorage.clear()
  go('/')
}
</script>

<template>
  <a-layout-header class="student-header">
    <a-row class="header-row">
      <a-col :offset="1" :span="3" class="flex-center">
        <div class="logo hover-pointer" @click="go('/')"></div>
      </a-col>
      <a-col :offset="6" :span="10" style="height: 72px">
        <a-menu
            v-model:selectedKeys="selectedKeys"
            mode="horizontal"
            :style="{ lineHeight: '72px',background: 'transparent'}"
        >
          <a-menu-item v-for="item in menus" :key="item.key" @click="handelChangeMenuClick(item.key)" :style="{marginRight:'20px'}">
            <icon-pack :icon="item.icon" size="18" style="margin-right: 10px"/>
            <router-link :to="item.href" style="font-size: 18px">{{ item.label }}</router-link>
          </a-menu-item>
        </a-menu>
      </a-col>
      <a-col :offset="1" :span="3" class="item-end">
        <a-dropdown >
          <a-badge dot>
            <a-avatar shape="square" :src="userInfo?.cover" style="background-color: #87d068">
<!--              <template #icon><UserOutlined /></template>-->
            </a-avatar>
          </a-badge>
          <template #overlay>
            <a-menu>
              <a-menu-item key="userInfo">
                <a-button size="small" @click="handelGo" type="link">
                  用户信息
                </a-button>
              </a-menu-item>
              <a-menu-item key="config">
                <Preferences>偏好设置</Preferences>
              </a-menu-item>
              <a-menu-divider />
              <a-menu-item key="out-login" @click="logOut">
                <a-button size="small" type="link">退出登录</a-button>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-col>
    </a-row>
  </a-layout-header>
</template>

<style scoped lang="scss">
  .logo{
    float: left;
    width: 120px;
    height: 36px;
    margin: 16px 24px 16px 0;
    background: url("/src/assets/image/Linter.png");
    background-size: 100% 100%;
  }
  .student-header{
    height: 72px;
    background-color: #fff;
    border-bottom: 1px solid #c1c1c1;
  }
  .header-row{
    height: 72px;
    line-height: 72px;
  }
</style>